<template>
  <div class="recommemd" ref="recommemd">
    <!-- 推荐列表 -->
    <div class="recommemdList">
      <ul>
        <li v-for="(ee, ei) in pageExpect" :key="ei">
          <router-link :to="{ path: '/rdVideo', query: { _id: ee.id } }">
            <img :src="`${ee.shareInfo.img}`" />
            <p class="rec-title">{{ ee.shareInfo.title }}</p>
            <!-- 作者 -->
            <div class="rec-author">
              <div class="author1">
                <img :src="`${ee.user.avatarurl}`" alt="" />
                <span>{{ ee.user.nickName }}</span>
              </div>
              <div class="author2">
                <i class="iconfont icon-dianzan"></i>
                <span>{{ ee.upCount }}</span>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <!-- <div class="loading" v-if="isAchiveBottom">
         <van-loading size="60px" color="#1989fa" vertical>加载中...</van-loading>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Toast } from "vant";
import _ from "lodash"; //导入loadsh插件
// import throttle from "lodash/throttle"; //导入loadsh插件

export default {
  name: "pageExpect",
  data() {
    return {
      pageExpect: [],
      isAchiveBottom: false, //滚动条是否到底部标志
      peoffset: 0, //初始化数据
    };
  },
  components: {
    [Toast.name]: Toast,
  },
  created() {
    this.$refs.recommemd.addEventListener(
      "scroll",
      _.throttle(() => {
        this.bottomOut();
      }, 500)
    );
  },
  methods: {
    ...mapMutations(["changeHomepage"]),
    getData(k) {
      let pro = axios.get(`video/${k}`);
      pro
        .then((res) => {
          console.log("----", res.feeds);
          // 合并数组
          if (this.$store.state.homepageArray.length == 0) {
            //   赋值
            this.pageExpect = [];
            this.pageExpect = res.feeds;
            //  存值
            this.changeHomepage(this.pageExpect);
          } else {
            this.pageExpect = [];
            this.pageExpect = this.$store.state.homepageArray.concat(res.feeds);
          }
          Toast.clear();
          //  存值
          this.changeHomepage(this.pageExpect);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //  触底加载方法  需要优化
    bottomOut() {
      //滚动高度
      const scrollTopHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      //屏幕可用工作区高度
      const clientHeight =
        document.documentElement.clientHeight || window.screen.availHeight;
      //网页可见区域高(包括边线的宽)
      const offsetHeight =
        document.documentElement.offsetHeight || document.body.offsetHeight;
      if (
        scrollTopHeight + clientHeight >= offsetHeight - 300 &&
        this.isAchiveBottom == false &&
        this.peoffset < 5
      ) {
        // console.log("达到最小值---推荐视频触底---");
        this.isAchiveBottom = true;
        Toast.loading({
          message: "加载中...",
          forbidClick: true,
        });

        setTimeout(() => {
          this.changeData();
          this.isAchiveBottom = false;
          // Toast.clear();
        }, 2000);
      } else {
        console.log("没有更多数据了");
      }
    },
    //  处理 触底 数据
    changeData() {
      this.peoffset++;
      this.peoffset = this.peoffset;
      console.log("处理 触底 数据-----", this.peoffset);
      if (this.peoffset < 5) {
        this.getData(this.peoffset);
      } else {
        console.log("没有更多了。。。");
      }
    },
    //  随机高度，
    randomHeight(k) {
      let array = [220, 110];
      let arrayIndex = Math.floor(Math.random() * array.length);
      for (let i = 0; i < k; i++) {
        // console.log('-----随机高度，',array.splice(arrayIndex, 1)[0]);
        return array.splice(arrayIndex, 1)[0];
      }
    },
  },
  mounted() {
    if (this.peoffset < 5) {
      this.getData(0);
    }
    console.log('recommemd---',this.$refs.recommemd);
  },
  destroyed() {
    this.$refs.recommemd.removeEventListener(
      "scroll",
      _.throttle(() => {
        this.bottomOut();
      }, 500)
    );
  },
};
</script>

<style lang="scss" scoped>
.recommemdList {
  ul {
    width: 352px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    li {
      margin: 10px 0;
      border-radius: 7px;
      background: #fff;
      img {
        width: 170px;
        height: 220px;
        object-fit: cover;
        border-radius: 7px;
        // min-height: 110px ;
      }
      // 标题
      .rec-title {
        font-size: 12px;
        font-weight: bold;
        line-height: 1.2;
        width: 160px;
        margin: 5px auto;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      // 作者
      .rec-author {
        width: 160px;
        margin: 5px auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        .author1 {
          // 图片和文字居中
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
          span {
            margin-left: 5px;
            font-size: 12px;
          }
        }
        .author2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          i {
            font-size: 12px;
            margin-right: 2px;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
  }
}
// .recommemd{
//   width: 100%;
//   height: 100%;
//   position: relative;
// }
// .loading{
//   width: 100%;
//   height: 100%;
//   position:fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   margin: auto;
//   z-index: 999;
//   div{
//     width: 100%;
//     height: 100%;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//   }
// }
</style>